<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 600px;
        height: 600px;
        border: 1px solid;
        margin: 50px auto;
        position: relative;
      }
      .container div {
        width: 180px;
        height: 180px;
        position: absolute;
        text-align: center;
        line-height: 180px;
        font-size: 80px;
        color: rgba(255, 255, 255, 0.6);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div style="top: 10px; left: 10px; background-color: red">1</div>
      <div style="top: 10px; left: 33.33%; background-color: orange">2</div>
      <div style="top: 10px; left: 66.66%; background-color: yellow">3</div>

      <div style="top: 33.33%; left: 10px; background-color: green">4</div>
      <div style="top: 33.33%; left: 33.33%; background-color: blue">5</div>
      <div style="top: 33.33%; left: 66.66%; background-color: purple">6</div>

      <div style="top: 66.66%; left: 10px; background-color: pink">7</div>
      <div style="top: 66.66%; left: 33.33%; background-color: gray">8</div>
      <div style="top: 66.66%; left: 66.66%; background-color: skyblue">9</div>
    </div>
    <script>
      var divs = document.querySelectorAll(".container div");
      divs.forEach(function (div, key) {
        div.onmousedown = function (e) {
          this.style.transition = "none";
          var x = e.clientX - this.offsetLeft;
          var y = e.clientY - this.offsetTop;
          this.style.zIndex = 10;
          var obj = {
            x: div.offsetLeft,
            y: div.offsetTop,
          };
          var maxAraeEle = null;
          var isCrash = false;
          // console.log(obj);
          this.onmousemove = function (e) {
            var xx = e.clientX;
            var yy = e.clientY;
            this.style.left = xx - x + "px";
            this.style.top = yy - y + "px";
            var that = this;
            var crashArr = [];
            divs.forEach(function (item) {
              if (item !== that) {
                console.log(that.offsetLeft);
                if (
                  Math.abs(that.offsetLeft - item.offsetLeft) <=
                    that.offsetWidth &&
                  Math.abs(that.offsetTop - item.offsetTop) <= that.offsetHeight
                ) {
                  console.log("有和其他的8个元素碰撞");
                  crashArr.push(item);
                  isCrash = true;
                }
              }
            });
            var arae = 0;
            crashArr.forEach(function (crashItem) {
              var x =
                crashItem.offsetWidth -
                Math.abs(crashItem.offsetLeft - that.offsetLeft);
              var y =
                crashItem.offsetHeight -
                Math.abs(crashItem.offsetTop - that.offsetTop);
              var res = x * y;
              if (res > arae) {
                arae = res;
                maxAraeEle = crashItem;
              }
            });
            console.log("??".maxAraeEle);
          };

          div.onmouseup = function () {
            div.onmousemove = "";
            div.style.zIndex = 0;
            div.style.transition = "all 1s";
            if (isCrash) {
              div.style.left = maxAraeEle.style.left;
              div.style.top = maxAraeEle.style.top;
              maxAraeEle.style.left = obj.x + "px";
              maxAraeEle.style.top = obj.y + "px";
            } else {
              div.style.left = obj.x + "px";
              div.style.top = obj.y + "px";
            }
          };
        };
      });
    </script>
  </body>
</html>
